<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="">
  <title>活动添加</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <link rel="stylesheet" href="../assets/css/layui.css" media="all" />
  <link rel="stylesheet" href="../assets/css/view.css"/>

</head>
<body>
<div class="layui-content">
  <div class="layui-row">
    <div class="layui-card">
      <div class="layui-card-header">新增活动</div>
      <form class="layui-form layui-card-body">

        <div class="layui-form-item">
          <label class="layui-form-label">活动名称</label>
          <div class="layui-input-block">
            <input type="text" name="activityName" required  lay-verify="required" placeholder="请输入活动名称" autocomplete="off" class="layui-input">
          </div>
        </div>


        <div class="layui-form-item">
          <label class="layui-form-label">举办时间</label>
          <div class="layui-input-inline">
            <input name="holdingDay" type="text" value="" placeholder="请输入举办时间" lay-verify="eventDay" readonly class="layui-input eventDay" id="laydate">
          </div>
        </div>


        <div class="layui-form-item">
          <label class="layui-form-label">协助部门</label>
          <div class="layui-input-inline">
              <select name="department" lay-filter="department" class="department">
                  <option value="">请选择部门</option>
              </select>
          </div>
      </div>



        <div class="layui-input-block">
        <div class="layui-form-item">

          <button id="uploadAction" class="layui-btn layui-btn-blue" lay-submit lay-filter="formDemo">立即提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
        </div>
      </form>
      <div class="layui-input-block">
        <div class="layui-upload layui-row">
          <button type="button" class="layui-btn layui-btn-blue" id="testList">+ 点击添加文件</button>
          <button type="button" class="layui-btn layui-btn-blue" id="updata">上传文件</button>
          <div class="layui-upload-list">
            <table class="layui-table">
              <thead>
              <tr><th>文件名</th>
                <th>大小</th>
                <th>状态</th>
                <th>操作</th>
              </tr></thead>
              <tbody id="demoList"></tbody>
            </table>
          </div>

        </div>
        <blockquote class="layui-elem-quote">仅支持上传.docx .doc格式的文档</blockquote>

      </div>
    </div>
  </div>
</div>
<script src="../assets/layui.js"></script>

<script>

  layui.use(['form','layer','jquery','upload','laydate'], function(){
      var form = layui.form,
          layer = layui.layer,
          $ = layui.jquery,
          upload = layui.upload,
          laydate = layui.laydate;

      var xhrOnProgress=function(fun) {
          xhrOnProgress.onprogress = fun; //绑定监听
          //使用闭包实现监听绑
          return function() {
              //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
              var xhr = $.ajaxSettings.xhr();
              //判断监听函数是否为函数
              if (typeof xhrOnProgress.onprogress !== 'function')
                  return xhr;
              //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
              if (xhrOnProgress.onprogress && xhr.upload) {
                  xhr.upload.onprogress = xhrOnProgress.onprogress;
              }
              return xhr;
          }
      }

    $.ajax({
      type : "post",
      url : "../department.do",
      data : {
        tran:'select',
        type:'all'
      },
      dataType : "json",

      success : function(f) {
        var tmp = '<option value="">--请选择部门--</option>';
        var d = f.data;
        $(".department").html(tmp);
        for ( var i in d) {
          tmp += '<option value="' + d[i].id +  '">' + d[i].departmentName + '</option>';
        }
        $(".department").html(tmp);
        form.render();
      }
    });

      laydate.render({
          elem: '#laydate'
          ,format: 'yyyy-MM-dd'
      });
      
    var j ;
    var index = 0;
    var uploadListIns =upload.render({
          elem: '#testList',
          url: '../upword.do',//待定
          auto: false, //选择文件后不自动上传
          bindAction: '#updata', //指向一个按钮触发上传
          exts: 'docx|doc',
          auto: false,
          data:{
              tran:'word'
          },
        xhr:xhrOnProgress,
         progress:function(value){//上传进度回调 value进度值
        console.log(value);
         },
          before:function(){
            j = layer.load("文件上传中，请稍后，",0);
          },
          choose: function(obj){
              var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
              //读取本地文件
              obj.preview(function(index, file, result){
                  var tr = $(['<tr id="upload-'+ index +'">'
                      ,'<td>'+ file.name +'</td>'
                      ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
                      ,'<td>等待上传</td>'
                      ,'<td>'
                      ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                      ,'</td>'
                      ,'</tr>'].join(''));

                  //删除
                  tr.find('.demo-delete').on('click', function(){
                      delete files[index]; //删除对应的文件
                      tr.remove();
                      uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                  });

                  $("#demoList").append(tr);
              });
          },
          done:function (res) {
              if (res.code == '0'){
                  index =1;
                  layer.msg("上传成功！")
                  layer.close(j);
                  delete files[index]; //删除对应的文件
                   tr.remove();
                   uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
              }else{
                  layer.msg("上传失败！")
              }

          },
          error:function (jqXHR, textStatus, errorThrown) {
              layer.close(j);
          }
      })

      form.on("submit(formDemo)",function(data){
          console.log(data)
        if (index==0){
          layer.msg("请先上传文件")
        }else{
          $.ajax({
            url: '../activity.do',//待定
            data: {
              activityName:data.field.activityName,
              holdingDay:data.field.holdingDay,
              department:data.field.department,
              tran:'add'
            },
            dataType: 'json',
            type: 'post',
            success: function(data) {
              if(data.code == '0'){
                layer.msg(data.msg)
                index =0;
                window.location.reload();
              }else{
                layer.msg(data.msg)
                index =0;
              }
              layer.close(j);
            },
            error:function (jqXHR, textStatus, errorThrown) {
              layer.close(j);
            }
          })
        }
        return false;
      })
    function sleep(n) { //n表示的毫秒数
      var start = new Date().getTime();
      while (true) if (new Date().getTime() - start > n) break;
    }  

  })

</script>

</body>
</html>